<template>
  <!--新增、 编辑、查看权限 -->
  <el-dialog
    :title="addOrEditForm.title"
    :visible.sync="visible"
    width="500px"
    @close="closeDialog()"
  >
    <el-form
      ref="addOrEditForm"
      label-width="90px"
      :model="addOrEditForm"
      size="small"
      :rules="roleRules"
    >
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="addOrEditForm.name" auto-complete="off" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="addOrEditForm.description" auto-complete="off" placeholder="请输入角色描述" />
      </el-form-item>
      <el-form-item label="权限配置">
        <el-tree
          ref="listTree"
          :data="allPermissions"
          :props="listTreeProps"
          node-key="id"
          :show-checkbox="true"
          :default-expand-all="false"
          :accordion="false"
          empty-text="没有权限数据"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeDialog()">取消</el-button>
      <el-button size="small" type="primary" class="title" @click="submitForm('addOrEditForm')">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { requestGetchildListIDByRoleId, requestSaveByRoleId } from '@/api/role'
import { requestAllPage } from '@/api/user'
import { successMessage } from '@/utils/message'
export default {
  data() {
    return {
      visible: false,
      allPermissions: [],
      listDataTemp: [],
      listTreeProps: {
        label: 'name',
        children: 'children'
      },
      addOrEditForm: {
        title: '',
        id: '',
        name: '',
        description: '',
        permissionIds: []
      },
      roleRules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { pattern: /^[0-9A-Za-z]{3,10}$/, message: '角色名称由3-10位数或字字母组合', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    requestAllPage().then(data => {
      this.allPermissions = data
      this.listDataTemp = data
    })
  },
  methods: {
    init(row) {
      this.allPermissions = this.listDataTemp
      if (row) {
        this.addOrEditForm.title = '编辑角色'
        this.addOrEditForm.id = row.id
        this.addOrEditForm.name = row.name
        this.addOrEditForm.description = row.description
        requestGetchildListIDByRoleId({ roleId: row.id }).then(data => {
          // 解决在tree未加载完成设置选择项
          data = data || []
          // console.log(data)
          this.$nextTick(() => {
            this.$refs.listTree.setCheckedKeys(data)
          })
        })
        this.visible = true
      } else {
        this.visible = true
        this.addOrEditForm.title = '新增角色'
      }
    },
    closeDialog() {
      this.visible = false
      // 重置树形组件数据
      this.$refs.listTree.setCheckedKeys([])
      this.$refs['addOrEditForm'].resetFields()
      this.allPermissions = []
      this.addOrEditForm = {
        title: '',
        id: '',
        name: '',
        description: '',
        permissionIds: []
      }
    },
    submitForm(Visible) {
      this.$refs[Visible].validate((validate) => {
        if (validate && Visible === 'addOrEditForm') {
          this.addOrEditForm.permissionIds = this.$refs.listTree.getCheckedKeys().concat(this.$refs.listTree.getHalfCheckedKeys())
          requestSaveByRoleId(this.addOrEditForm).then(data => {
            this.visible = false
            this.$emit('refreshDataList')
            this.$refs[Visible].resetFields()
            successMessage('保存数据成功')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
</style>
